Radio button Guidelines 單選按鈕指導規則

Usage  用法

單選按鈕是允許使用者從選項列表中進行單項選擇的推薦方式。一次只能選擇一個單選按鈕

從一組選項中選擇單個選項。顯示所有可用選項

單選按鈕用於單選場景
核取方塊用於多選場景

避免巢狀單選按鈕或使用單選按鈕選擇多個選項

× 避免單選按鈕有父子關係
× 避免單選按鈕選擇多個場景

Alternate selection controls交替選擇控制元件

單選按鈕是一種常見的控制元件,讓使用者可以從多個選項中選擇一個。除了單選按鈕外,還有開關和核取方塊這兩種簡單的選擇控制元件,都可以用來設定各種選項。

Switches  開關
Checkboxes 核取方塊

當五個或更少選項時使用單選按鈕。如需節省空間可用下拉選單,但會增加使用者操作步驟和認知負擔。

✓ 當選項小於等於5個時,使用單選按鈕
✓ 空間有限考慮下拉選單,而非單選按鈕

Anatomy 結構

1 Icon (selected)圖示(已選中) 2 Adjacent label text 相鄰標籤文字 3 Icon (unselected)圖示(未選中)

Adjacent label text  相鄰的標籤文字

每個單選按鈕都必須有標籤說明。標籤要放在按鈕旁邊,清楚地說明這個選項是什麼。記住,因為使用者只能選擇一個選項,所以每個單選按鈕都需要它自己的標籤。

Placement  放置位置

單選按鈕通常以堆疊佈局排列。

單選按鈕應垂直排列,並且始終有一個選項被選中。

✓ 單選按鈕始終要有一個選項被預先選中
× 避免使用水平單選按鈕列表

Behavior  行為

當使用者點選或觸控單選按鈕圖示或標籤時,單選按鈕即被成功選中。

Interaction & style 互動與樣式

單選按鈕有兩種狀態:選中和未選中。當你選中一個按鈕時,其他按鈕會自動取消選中。在一組單選按鈕中,你可以設定一個預設選中的按鈕,也可以讓所有按鈕都保持未選中狀態。

選中後想要取消怎麼辦?你可以:

  1. 選擇"不適用"或"無"選項(如果有的話)
  1. 使用"清除選擇"按鈕(如果有的話)

為了方便使用,你可以點選單選按鈕本身,也可以點選旁邊的文字來進行選擇。